import React, { Component } from 'react';
import { View, Text, ImageBackground, Image, TouchableOpacity } from 'react-native';
import request from "../../../../utils/request";
import { BASE_URI, FRIENDS_QUESTIONSECTION, FRIENDS_QUESTIONANS } from "../../../../utils/pathMap";
import THNav from "../../../../components/THNav";
import { pxToDp } from '../../../../utils/stylesKits';
import { inject, observer } from "mobx-react";
import LinearGradient from "react-native-linear-gradient";

@inject("UserStore")
@observer

// "count": 3, "imgpath": "/upload/questions/1.png", "islock": false, "istested": true, "qid": 1, "sort_no": 1, "star": 2, "status": 0, "title": "初级灵魂题", "type": "初级"
class Index extends Component {
    titles = {
        "初级": require('../../../../res/leve1.png'),
        "中级": require('../../../../res/leve2.png'),
        "高级": require('../../../../res/leve3.png'),
    }
    ansList = []
    state = {
        // 测试题问卷列表数据
        questionList: [
            // "qsid":1,"question_title":"未来生活的幸福指数，跟物质和精神哪个关系更大？","answers":[{"qsid":1,"ans_title":"跟物质关系更大","ans_No":"A"},{"qsid":1,"ans_title":"跟精神关系更大","ans_No":"B"}]
        ],
        currentIndex: 0
    }

    componentDidMount() {
        this.getList();
    }

    // 获取测试题问卷
    getList = async () => {
        const url = FRIENDS_QUESTIONSECTION.replace(':id', this.props.route.params.qid);
        const res = await request.privateGet(url);
        this.setState({ questionList: res.data })
    }

    getFont = (number) => {
        let numCn = '';
        switch (number) {
            case 1:
                numCn = '一'
                break;
            case 2:
                numCn = '二'
                break;
            case 3:
                numCn = '三'
                break;
            case 4:
                numCn = '四'
                break;
            default:
                numCn = number
                break;
        }
        return numCn;
    }

    // 选择答案
    chooseAns = async (ans) => {
        const { currentIndex, questionList } = this.state;
        this.ansList.push(ans);
        // 当当前的索引 大于等于 数组的长度减一了就是最后一题了
        if (currentIndex >= questionList.length - 1) {
            const url = FRIENDS_QUESTIONANS.replace(':id', this.props.route.params.qid);
            const answers = this.ansList.join(',');
            const res = await request.privatePost(url, { answers });
            // console.log(res);
            this.props.navigation.navigate('TestResult', res.data);
        } else {
            this.setState({ currentIndex: currentIndex + 1 });
        }
    }

    render() {
        const { currentIndex, questionList } = this.state;
        const question = this.props.route.params;
        // console.log(this.props.route.params);
        // console.log(question);
        const user = this.props.UserStore.user;
        if (!questionList[currentIndex]) return <></>;
        return (
            <View style={{ flex: 1, backgroundColor: '#fff', position: 'relative' }}>
                <THNav title={question.title} />
                <ImageBackground
                    style={{ width: '100%', height: '100%' }}
                    source={require('../../../../res/qabg.png')}
                >
                    {/* 两侧图标 */}
                    <View style={{ marginTop: pxToDp(60), flexDirection: 'row', justifyContent: 'space-between' }}>
                        <ImageBackground
                            style={{ width: pxToDp(66), height: pxToDp(52), justifyContent: 'center', alignItems: 'flex-end' }}
                            source={require('../../../../res/qatext.png')}
                        >
                            <Image
                                style={{ width: pxToDp(44), height: pxToDp(44), borderRadius: pxToDp(22), marginRight: pxToDp(4) }}
                                source={{ uri: BASE_URI + user.header }} />
                        </ImageBackground>
                        <ImageBackground
                            style={{ width: pxToDp(66), height: pxToDp(52), justifyContent: 'center', alignItems: 'flex-end' }}
                            source={this.titles[question.type]}
                        >

                        </ImageBackground>
                    </View>

                    {/* 测试题 */}
                    <View style={{ position: 'absolute', width: '80%', top: pxToDp(150), alignSelf: 'center', alignItems: 'center' }}>
                        <View>
                            <Text style={{ color: '#fff', fontSize: pxToDp(26), fontWeight: 'bold' }}>第{this.getFont(currentIndex + 1)}题</Text>
                            <Text style={{ color: '#ffffff9a', textAlign: 'center' }}>({currentIndex + 1}/{questionList.length})</Text>
                        </View>

                        <Text style={{ marginTop: pxToDp(30), fontSize: pxToDp(18), color: '#fff', fontWeight: 'bold' }}>{questionList[currentIndex].question_title}</Text>
                        {/* 答案 */}
                        <View style={{ width: '100%', marginTop: pxToDp(30) }}>
                            {questionList[currentIndex].answers.map((v, i) => <TouchableOpacity key={i}
                                onPress={this.chooseAns.bind(this, v.ans_No)}
                                style={{ marginTop: pxToDp(30) }}>
                                <LinearGradient
                                    style={{ height: pxToDp(50), borderRadius: pxToDp(6), justifyContent: 'center', alignItems: 'center' }}
                                    colors={['#6f45f3', '#6f45f31a']}
                                    start={{ x: 0, y: 0 }}
                                    end={{ x: 1, y: 0 }}
                                >
                                    <Text style={{ color: '#fff', fontSize: pxToDp(16) }}>{v.ans_title}</Text>
                                </LinearGradient>
                            </TouchableOpacity>)}
                        </View>
                    </View>
                </ImageBackground>
            </View>
        );
    }
}

export default Index;